<template>
<!-- 病情评估 -->
    <div >
        <div class="header">
            <div class="header-left" @click="finish"><image :src="titleUrl" class="header-left-img"></image></div>
            <div class="header-center"><text class="header-text">病情评估</text></div>
            <div class="header-right" @click="save" v-if="canSave"><text class="header-right-text">保存</text></div>
            <div class="header-right-s" v-if="! canSave"></div>
        </div>
        <div class="content">
            <div class="box">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox-auto" :class="[resData.IS_PERSISTENT==1?'box-active':'']" @click="reverse('IS_PERSISTENT')"><text class="checkbox-text" :class="[resData.IS_PERSISTENT==1?'box-text-active':'']">持续性胸闷/胸痛</text></div>
                <div class="checkbox-auto mf-10" :class="[resData.IS_INTERMITTENT==1?'box-active':'']" @click="reverse('IS_INTERMITTENT')"><text class="checkbox-text" :class="[resData.IS_INTERMITTENT==1?'box-text-active':'']">间歇性胸闷/胸痛</text></div>
                <div class="checkbox-auto mf-10" :class="[resData.IS_LAXATION==1?'box-active':'']" @click="reverse('IS_LAXATION')"><text class="checkbox-text" :class="[resData.IS_LAXATION==1?'box-text-active':'']">胸痛症状已缓解</text></div>
                <div class="checkbox-auto mf-10" :class="[resData.IS_BELLYACHE==1?'box-active':'']" @click="reverse('IS_BELLYACHE')"><text class="checkbox-text" :class="[resData.IS_BELLYACHE==1?'box-text-active':'']">腹痛</text></div>

            </div>
            <div class="box">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox-auto" :class="[resData.IS_DYSPNEA==1?'box-active':'']" @click="reverse('IS_DYSPNEA')"><text class="checkbox-text" :class="[resData.IS_DYSPNEA==1?'box-text-active':'']">呼吸困难</text></div>
                <div class="checkbox-auto mf-10" :class="[resData.IS_MALIGNANT_ARRHYTHMIA==1?'box-active':'']" @click="reverse('IS_MALIGNANT_ARRHYTHMIA')"><text class="checkbox-text" :class="[resData.IS_MALIGNANT_ARRHYTHMIA==1?'box-text-active':'']">恶性心率失常</text></div>
                <div class="checkbox-auto mf-10" :class="[resData.IS_CPR==1?'box-active':'']" @click="reverse('IS_CPR')"><text class="checkbox-text" :class="[resData.IS_CPR==1?'box-text-active':'']">心肺复苏</text></div>
                <div class="checkbox-auto mf-10" :class="[resData.IS_SHOCK==1?'box-active':'']" @click="reverse('IS_SHOCK')"><text class="checkbox-text" :class="[resData.IS_SHOCK==1?'box-text-active':'']">休克</text></div>
            </div>
            <div class="box">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox-auto" :class="[resData.IS_HEART_ATTACK==1?'box-active':'']" @click="reverse('IS_HEART_ATTACK')"><text class="checkbox-text" :class="[resData.IS_HEART_ATTACK==1?'box-text-active':'']">心衰</text></div>
                <div class="checkbox-auto mf-10" :class="[resData.IS_HEMORRHAGE==1?'box-active':'']" @click="reverse('IS_HEMORRHAGE')"><text class="checkbox-text" :class="[resData.IS_HEMORRHAGE==1?'box-text-active':'']">合并出血</text></div>
                <div class="checkbox-auto mf-10" :class="[resData.IS_OTHER==1?'box-active':'']" @click="reverse('IS_OTHER')"><text class="checkbox-text" :class="[resData.IS_OTHER==1?'box-text-active':'']">其他</text></div>
            </div>
        </div>
    </div>
</template>
<script>
    import WeexNativeModule from "../../common/WeexNativeModule"
    import DateUtil from "../../common/util/DateUtil"
    import StringUtils from "../../common/util/StringUtils"
    import JsonFilter from "../../common/util/JsonFilter"
    import ACApi from "../../common/http/ACApi"
    import Resource from "../../../dist/res/Resource"
    export default {
        name: 'EMNewMainEditInfo',
        data: function () {   
            return {
                titleUrl: 'title_cha_img.png',
                ORDER_ID: '',    
                resData: {          
                    IS_PERSISTENT:'',
                    IS_INTERMITTENT:'',
                    IS_LAXATION:'',
                    IS_BELLYACHE:'',
                    IS_DYSPNEA:'',
                    IS_MALIGNANT_ARRHYTHMIA:'',
                    IS_CPR:'',
                    IS_SHOCK:'',
                    IS_HEART_ATTACK:'',
                    IS_HEMORRHAGE:'',
                    IS_OTHER:'',                    
                },
                canSave:true
            }                                                     
        },
        mounted: function() {
            let _this = this
            WeexNativeModule.showProgressDialog('正在获取数据，请稍等')
            WeexNativeModule.getParam(function (data) {
                let param = JSON.parse(data.param)
//                WeexNativeModule.alert(param);
                if(param.isJustOpen){
                    let data = JSON.parse(param.data);
                    _this.canSave = false;
                    _this.resData.IS_PERSISTENT = data.IS_PERSISTENT;
                    _this.resData.IS_INTERMITTENT = data.IS_INTERMITTENT;
                    _this.resData.IS_LAXATION = data.IS_LAXATION;
                    _this.resData.IS_BELLYACHE = data.IS_BELLYACHE;
                    _this.resData.IS_DYSPNEA = data.IS_DYSPNEA;
                    _this.resData.IS_MALIGNANT_ARRHYTHMIA = data.IS_MALIGNANT_ARRHYTHMIA;
                    _this.resData.IS_CPR = data.IS_CPR;
                    _this.resData.IS_SHOCK = data.IS_SHOCK;
                    _this.resData.IS_HEART_ATTACK = data.IS_HEART_ATTACK;
                    _this.resData.IS_HEMORRHAGE = data.IS_HEMORRHAGE;
                    _this.resData.IS_OTHER = data.IS_OTHER;
                }else {
                    _this.canSave = true;
                    _this.ORDER_ID = param.taskcode
                }
            })
        },
        methods: {
            finish: function() {
                WeexNativeModule.finish()
            },
            reverse: function (key){
                if(! this.canSave){
                    return
                }
                this.resData[key] = this.resData[key] && this.resData[key] != 0 ? 0 : 1;
            },
            save: function() {
                let _this = this;
                if(! _this.canSave){
                    return;
                }
                let postjson = JsonFilter.filter(_this.resData)
                if(JSON.stringify(postjson).length<3) {
                    WeexNativeModule.toast('请至少选择一项')
                    return;
                }else {
                    postjson.ORDER_ID = _this.ORDER_ID
                }
                WeexNativeModule.addEMNode(JSON.stringify(postjson))
            }
        }
    }
</script>
<style>
    .header {
        height: 40px;
        background-color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;    
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width:  0.5px;
        border-bottom-color: #f2f2f2;
    }
    .header-left {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    .header-left-img {
        width: 30px;
        height: 30px;
        margin-left: 15px;
    }
    .header-right {
        width: 80px;
        height: 25px;
        background-color: #4c7fd8;
        margin-right: 20px;  
        border-radius: 2px;     
    }
    .header-right-s {
        width: 80px;
        height: 25px;
        margin-right: 20px;
        border-radius: 2px;
    }
    .header-text {
        font-size: 13px;
        color: #666;
    }
    .header-right-text {
        font-size: 13px;
        color: #FFF;
        text-align: center;
        line-height: 25px;       
    }
    .banner-tab {  
        width: 760px;      
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #f2f2f2;
        padding-left: 5px;
        padding-right: 5px;
              
    }
    .tab {
        width: 80px;
        height: 30px;
        display: flex;
        justify-content: center; 
        margin-left: 5px;
        margin-right: 5px;
    }
    .tab-text {
        text-align: center;
        font-size: 12px;
        color: #666;
    }
    .tab-active {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #4c7fd8;
    }
    .content {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
    .box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 40px;
        align-items: center;
    }  
    .box-text {
        font-size: 12px;
        color: #666;
    }
    .line {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }   
    .title {
        width: 80px;
    }        
    .checkbox-auto {  
        display: flex;
        justify-content: center;
        align-items: center; 
        width: 120px;     
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
    }
    .checkbox-text {
        font-size: 12px;
        color: #666;
    }   
    .mf-10 {
        margin-left: 10px;
    }    
    .box-active {
        background-color: #4c7fd8;
    }
    .box-text-active {
        color: #FFF;
    }
</style>

